<template>
	<view>
		<u-navbar :is-back="true" title="活动订单收入明细"></u-navbar>
		<view class="content">
			<view class="top">
				<view class="today">
					今日收益：￥100.00
				</view>
				<view class="total f-c-sb">
					<view class="all"><span>全部收益</span> <u-icon name="arrow-down" padding-left="20" color="#131313" size="25"></u-icon></view>
					<view>累计收益<br>￥300.00</view>
					<view>已结算<br>￥300.00</view>
					<view>未结算<br>￥300.00</view>
				</view>
			</view>
			<view class="formBox">
				<view class="tip tip1">集客活动</view>
				<view class="orderList">
					<view class="label"><span>状态:</span><span>待结算</span></view>
					<view class="label"><span>订单编号：</span><span>5461321654656</span></view>
					<view class="label"><span>{{name}}：</span><span>235T手动版</span></view>
					<view class="label" v-if="id==2"><span>使用方式：</span><span>到店自取</span></view>
					<view class="labelMoney" v-show="id!=1">订单金额：<span>￥300.00</span></view>
					<view class="labelMoney">应付金额：<span>￥300.00</span></view>
					<view class="labelMoney">实付金额：<span>￥100.00</span></view>
					<view class="labelTime">结算时间：<span>2021-5-20</span></view>
					<view class="f-c-fe">
						<view class="btn" @tap="openOrderShowInfo">详情</view>
					</view>
				</view>
			</view>
			
			<view class="formBox">
				<view class="tip tip2">秒杀活动</view>
				<view class="orderList">
					<view class="label"><span>状态:</span><span>待结算</span></view>
					<view class="label"><span>订单编号：</span><span>5461321654656</span></view>
					<view class="label"><span>{{name}}：</span><span>235T手动版</span></view>
					<view class="label" v-show="id==2"><span>使用方式：</span><span>到店自取</span></view>
					<view class="labelMoney" v-if="id!=1">订单金额：<span>￥300.00</span></view>
					<view class="labelMoney">应付金额：<span>￥300.00</span></view>
					<view class="labelMoney">实付金额：<span>￥100.00</span></view>
					<view class="labelTime">结算时间：<span>2021-5-20</span></view>
					<view class="f-c-fe">
						<view class="btn" @tap="openOrderShowInfo">详情</view>
					</view>
				</view>
			</view>
			
			<view class="formBox">
				<view class="tip tip3">权益卡</view>
				<view class="orderList">
					<view class="label"><span>状态:</span><span>待结算</span></view>
					<view class="label"><span>订单编号：</span><span>5461321654656</span></view>
					<view class="label"><span>{{name}}：</span><span>235T手动版</span></view>
					<view class="label" v-if="id==2"><span>使用方式：</span><span>到店自取</span></view>
					<view class="labelMoney" v-show="id!=1">订单金额：<span>￥300.00</span></view>
					<view class="labelMoney">应付金额：<span>￥300.00</span></view>
					<view class="labelMoney">实付金额：<span>￥100.00</span></view>
					<view class="labelTime">结算时间：<span>2021-5-20</span></view>
					<view class="f-c-fe">
						<view class="btn" @tap="openOrderShowInfo">详情</view>
					</view>
				</view>
			</view>
		</view>
	  
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				id:'',
				header:"",
				name:''
			};
		},
		computed:{
			    ...mapGetters(["userInfo"]),
		
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    
			// JSON.parse() 由JSON字符串转换为JSON对象
			let objParam=JSON.parse(option.param);
			this.id=objParam.id;
   
		},
		methods:{
			openOrderShowInfo(){
				this.$navigateTo('/pages/my/detailsShow',{})
			}
		}
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #ededed;
		padding-top:20rpx;
		padding-bottom:20rpx;
		.top{
			width: 660rpx;
			margin: 0 auto 40rpx;
			.today{
				color: #131313;
				line-height: 36px;
				font-size: 28rpx;
			}
			.total{
				color: #131313;
				font-size: 22rpx;
				text-align: center;
			}
			.all{
				font-size: 24rpx;
				span{
					margin-right:15rpx;
				}
			}
		}
		.formBox{
			width: 660rpx;
			padding:0 26rpx 26rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			.tip{
				position: relative;
				top:20rpx;
				left:-26rpx;
				width: 145rpx;
				padding:0 15rpx;
				border-radius: 0 28rpx 28rpx 0;
				color: #ffffff;
				line-height: 56rpx;
				font-size: 24rpx;
				margin-bottom:20rpx;
			}
			.tip1{
				background: #ff9a41;
			}
			.tip2{
				background: #ff4166;
			}
			.tip3{
				background: #2bc1ff;
			}
			.subtitle{
				line-height: 60rpx;
				font-size: 32rpx;
				color: #777;
			}
			.label{
				display: flex;
				justify-content: space-between;
				line-height: 85rpx;
				font-size: 28rpx;
				color: #666666;
				border-bottom: 1px solid #ededed;
				span:last-child{
					color: #131313;
				}
				
			}
			.labelMoney{
				line-height: 85rpx;
				font-size: 28rpx;
				color: #666666;
				border-bottom: 1px solid #ededed;
				span{
					color: #ff6738;
					
				}
				
			}
			.labelTime{
				line-height: 85rpx;
				font-size: 28rpx;
				color: #666666;
				border-bottom: 1px solid #ededed;
				span{
					color: #131313;
				}
				
			}
			.btn{
				margin-top:20rpx;
				width: 180rpx;
				background: #177fff;
				border-radius: 33rpx; 
				color: #ffffff;
				line-height: 66rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}
		.formBox:last-child{
			margin-bottom: 0;
		}
	
	}
	
    
</style>
